<!--
 * @Description:创建和插入节点
 * @Author: Sun
 * @Date: 2019-07-01 20:05:50
 * @LastEditors: Sun
 * @LastEditTime: 2019-07-14 22:06:22
 -->
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>创建和插入节点</title>
	<style>

	</style>
	<script>
		window.onload = function () {
			var demo = document.getElementById("demo")
			var childrens = demo.children;
			var firstDiv = document.createElement("div")
			firstDiv.innerHTML = "插入到最后面子节点"
			demo.appendChild(firstDiv)
			var test = document.createElement("div")
			test.innerHTML = "指定插入的节点"
			demo.insertBefore(test, childrens[0])
			demo.removeChild(test)
			var last=childrens[0].cloneNode()
			last.innerHTML="我是克隆的节点"
			demo.appendChild(last)
			let sm=demo.cloneNode(true)
			sm.title="给父级添加兄弟节点"
			demo.parentNode.appendChild(sm)
		}
	</script>
</head>

<body>
	<div>
		1 appendChild(firstDiv) 添加孩子 append添加的意思 <br>
		意思：添加孩子 放到盒子的最后面 <br>
		2 insertBefore(插入的节点,参照节点)<br>
		写满2个参数<br>
		3 如果第二个参数为null 则 默认这新生成的盒子放到最后面<br>
		<hr>
		4 移除节点 removeChild(test)
		<hr>
		5 克隆节点
		 var last=children[0].cloneNode()
			括号里面可以谢参数  
			true 深层次复制 除了复制本盒子 还复制子节点
			false 浅层复制 只复制本盒子 不复制子节点
	</div>
	<hr>
	<div id="demo">
		<div id="xiongda"></div>
	</div>

</body>

</html>